<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <blockquote class="layui-elem-quote">
        <h1>Sparkline</h1>
        <div class="mar-top">这是另一个可视化图表库,手册:<a target="_blank" href="https://omnipotent.net/jquery.sparkline/#s-about">https://omnipotent.net/jquery.sparkline/#s-about</a>
        </div>
    </blockquote>
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">饼状图</div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <colgroup>
                            <col width="50">
                            <col width="200">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>效果</th>
                            <th>代码</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><span id="sparkline-1"></span></td>
                            <td>内联线性图</td>
                        </tr>
                        <tr>
                            <td><span id="sparkline-2"></span></td>
                            <td>柱状图</td>
                        </tr>
                        <tr>
                            <td><span id="sparkline-3"></span></td>
                            <td>饼状图</td>
                        </tr>
                        <tr>
                            <td><span id="sparkline-4"></span></td>
                            <td>长线性图</td>
                        </tr>
                        <tr>
                            <td><span id="sparkline-5"></span></td>
                            <td>三态图</td>
                        </tr>
                        <tr>
                            <td><span id="sparkline-6"></span></td>
                            <td>散点图</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">自定义饼状图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box text-center" id="sparkline-7"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">自定义柱状图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box text-center" id="sparkline-8"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">自定义线性图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box text-center" id="sparkline-9"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="../js/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../js/sparkline/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
    layui.use('layer', function () {
        var $ = layui.$;

        function sparkline1(){
            $("#sparkline-1").sparkline([34, 43, 43, 35, 44, 32, 44, 52, 25], {
                type: "line",
                lineColor: "#17997f",
                fillColor: "#1ab394"
            });
        }

        function sparkline2(){
            $("#sparkline-2").sparkline([5, 6, 7, 2, 0, -4, -2, 4], {
                type: "bar",
                barColor: "#1ab394",
                negBarColor: "#c6c6c6"
            });
        }

        function sparkline3(){
            $("#sparkline-3").sparkline([1, 1, 2], {
                type: "pie",
                sliceColors: ["#1ab394", "#b3b3b3", "#e4f0fb"]
            });
        }

        function sparkline4(){
            $("#sparkline-4").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
                type: "line",
                lineColor: "#17997f",
                fillColor: "#ffffff"
            });
        }

        function sparkline5(){
            $("#sparkline-5").sparkline([1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1], {
                type: "tristate",
                posBarColor: "#1ab394",
                negBarColor: "#bfbfbf"
            });
        }

        function sparkline6(){
            $("#sparkline-6").sparkline([4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4, 5, 8, 7, 6, 9, 3, 2, 4, 1, 5, 6, 4, 3, 7], {
                type: "discrete",
                lineColor: "#1ab394"
            });
        }

        function sparkline7(){
            $("#sparkline-7").sparkline([1, 4, 2], {type: "pie", width: "220", height: "220", sliceColors: ["#5FB878", "#DDD", "orange"],borderColor: '#000000'});
        }

        var barEl = $("#sparkline-8");
        var barValues = [30,21,31,43,20,50];
        var barValueCount = barValues.length;
        var barSpacing = 1;
        var sparkline8 = function(){
            barEl.sparkline(barValues, {
                type: 'bar',
                height: '100%',
                barWidth: Math.round((barEl.width() - ( barValueCount - 1 ) * barSpacing ) / barValueCount),
                barSpacing: barSpacing,
                zeroAxis: false,
                barColor: '#5FB878'
            });
        };

        function sparkline9(){
            $("#sparkline-9").sparkline([34, 62, 43, 12, 44, 32, 15, 22, 46], {
                type: "line",
                lineWidth: 1,
                width: "100%",
                height: "100%",
                lineColor: "#17997f",
                fillColor: "#ffffff"
            });
        }

        // 初始化方法
        var init = function(){
            sparkline1();
            sparkline2();
            sparkline3();
            sparkline4();
            sparkline5();
            sparkline6();
            sparkline7();
            sparkline8();
            sparkline9();
        };

        // 监听框架变化
        $(window).on('resize',function(){
            init();
        });

        init();

    });
</script>
</body>
</html>